<template>
  <!-- 套餐售卖页面 -->
  <el-row :gutter="0" class="pandectBox usersetmeal">
    <div class="title">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1">套餐</el-menu-item>
      </el-menu>
    </div>
    <div class="content">
      <div style="width:100%" class="clearfix">
        <div
          class="setmeal"
          v-for="(item,index) in contData"
          :key="index"
          :style="{'background': 'url('+item.img+') no-repeat center center'}"
        >
          <div class="packageType">
            <div class="packageTitle">
              <p style="margin:0;">
                <span>个人vip</span>
              </p>
            </div>
            <div class="packagemoney">
              <p style="margin:0;">
                <span style="margin:0 10px">98元/月</span>
                <span style="font-size:14px;text-decoration:line-through;">98元/月</span>
              </p>
            </div>
          </div>
          <div class="content-box">
            <div>
              <p style="margin:0;padding:19px 0;">
                <span style="font:16px">内容</span>
              </p>
            </div>
            <div>
              <p style="margin: 0">
                <span class="title-cont">我是内容我是内容我是内容我是内容我是内容 我是内容我是内容</span>
              </p>
            </div>
            <div class="btn-group">
              <el-button :style="{'background':item.color}" style="color:#fff" round>售卖</el-button>
              <el-button
                :style="{'border': '1px solid'+item.color,'color':item.color}"
                round
                @click="dialogFormVisible=true"
              >编辑</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑套餐对话框 -->
    <el-dialog title="转卖套餐" :visible.sync="dialogFormVisible" :show-close="false">
      <el-form :model="form">
        <el-form-item label="编辑价格:" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选择套餐:" :label-width="formLabelWidth">
          <el-button>个人vip</el-button>
        </el-form-item>
        <el-form-item label="购买月份:" :label-width="formLabelWidth">
          <el-button>一个月</el-button>
          <el-button>半年</el-button>
          <el-button>一年</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="dialogFormVisible = false"
          style="border-radius:3px;display:block;margin:0 auto;"
        >提交</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      contData: [
        {
          img: require("../../../assets/config_images/setmeal1.png"),
          color: "#3BD6B4"
        },
        {
          img: require("../../../assets/config_images/setmeal2.png"),
          color: "#24C6F0"
        },
        {
          img: require("../../../assets/config_images/setmeal3.png"),
          color: "#47A0FC"
        },
        {
          img: require("../../../assets/config_images/setmeal4.png"),
          color: "#FCB97F"
        },
        {
          img: require("../../../assets/config_images/setmeal5.png"),
          color: "#FB8F9C"
        }
      ],
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px"
    };
  },
  methods: {
    open() {}
  },
  components: {}
};
</script>

<style lang="scss" scoped>
// placeholder的颜色

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.usersetmeal {
  position: absolute;
  top: 85px;
  left: 192px;
  right: 125px;
  min-height: 720px;
  padding-right: 76px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  .title {
    margin-bottom: 28px;
    .el-menu-item {
      height: 48px;
      line-height: 48px;
      padding: 0;
      margin-left: 32px;
    }
  }
  .content {
    padding: 0 0 0 30px;
    height: 100%;
    overflow: hidden;
    .setmeal {
      width: 280px;
      height: 500px;
      float: left;
      margin-right: 20px;
      margin-bottom: 20px;
      .packageType {
        width: 100%;
        height: 178px;
        padding: 40px 0;
        color: #ffffff;
        .packageTitle {
          height: 36px;
          line-height: 36px;
          text-align: center;
          font-size: 24px;
          font-family: SourceHanSansCN-Bold;
          font-weight: bold;
        }
        .packagemoney {
          height: 62px;
          line-height: 62px;
          text-align: center;
        }
      }
      .content-box {
        height: 320px;
        padding: 0 20px;
        position: relative;
        .title-cont {
          font: {
            size: 12px;
            family: STHeitiSC-Light;
            weight: 300;
          }

          color: rgba(51, 51, 51, 1);
          line-height: 12px;
        }
        .btn-group {
          position: absolute;
          bottom: 26px;
          height: 36px;
          width: 240px;
          .el-button {
            padding: 11px 40px;
            border-radius: 18px;
          }
        }
      }
    }
    div > div:nth-child(5) {
      margin-right: 0;
    }
  }
  .el-dialog {
    .el-input {
      width: 290px;
      height: 34px;
    }
    .el-button {
      padding: 8px 25px;
      border-radius: 0;
      font-size: 14px;
      font-family: STHeitiSC-Medium;
      font-weight: 500;
    }
  }
}
</style>
<style lang="scss">
.usersetmeal {
  .el-dialog {
    width: 700px;
    height: 400px;
    .el-dialog__header {
      border-bottom: 2px solid #dfdfdf;
      padding: 11px 30px;
      .el-dialog__title {
        font-size: 16px;
      }
    }
    .el-input {
      input {
        height: 34px;
        border-radius: 2px;
      }
    }
    .el-dialog__footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      border-top: 2px solid #dfdfdf;
      padding: 10px 20px;
    }
  }
}
</style>
